
<template>
  <div>
      <MineInfo :userInfo="userInfo"></MineInfo>
     <div class="norecord" v-if="this.userRecord.length==0">
          <img src="../../assets/norecord.png" alt="没有播放记录"/>
     </div>
     <div v-else>
          <Title>试听列表</Title>
      <MineRecord :userRecord="userRecord"></MineRecord>
     </div>
  </div>
</template>

<script>
import MineInfo from '../MineInfo/MineInfo.vue';
import MineRecord from '../MineRecord/MineRecord.vue';
import Title from '../Title/Title.vue';
export default {
 components:{
     MineInfo,
     MineRecord,
     Title,
 },
 data(){
     return{
         userInfo:{
             level:"0",
             listenSongs:"0",
             profile:{
                 avatarUrl:"",
                 nickname:""
             }
         },
         userRecord:[]
     }
 },
 created(){
    this.axios.all( [this.getUserInfo(),this.getUserRecord()] )
    .then( this.axios.spread( (userInfo,userRecord)=>{
       console.log(userInfo)
       console.log(userRecord)
        this.userInfo = userInfo.data
        this.userRecord= userRecord.data.allData
    } ))
 },
 methods: {
      getUserInfo() {
          return this.axios.get(`http://localhost:3000/user/detail?uid=${localStorage.getItem('accountID')}`)
      },
      getUserRecord() {
          return this.axios.get(`http://localhost:3000/user/record?uid=${localStorage.getItem('accountID')}&type=0`)
      },
 }
};
</script>

<style scoped>
.norecord{
   width: 80%;
   height: 80%;
   margin: auto;
   margin-top: 45px;
}
.norecord>img{
   width: 100%;
}
</style>
